<template>
  <div class="skill-history" id="skillHistory">
    <crumb  :isShowBack="true"/>
    <!-- 版心 -->
    <div class="main-tj">
      <!-- 左侧 -->
      <div class="main-left">
        <div class="top-box">
          <div class="title">任务名称：{{trainingName}}</div>
          <div class="descript">任务要求：{{trainingRemark}}</div>
          <div class="topic-count">
            <span>题量:{{subjectNum}}</span>
          </div>
        </div>
      <!-- <CompleteList /> -->
        <div class="bottom-box">
          <div class="history-show-title">历史得分趋势</div>
          <!-- 历史记录的echarts图表 -->
          <div id="echartsDemo" style="clear:both"></div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="main-right">
        <div class="history-show-title">训练报告</div>
        <div class="finish-time cursor" @click="instructions()">
          <svg t="1580388390985" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2772" width="16" height="16"><path d="M979.014 317.153c-26.43-61.294-62.419-114.715-107.967-159.701-45.549-45.549-98.97-81.538-160.264-107.967C649.49 22.493 584.26 9.56 514.53 9.56S379.572 23.055 318.84 49.485s-114.152 62.418-159.7 107.967c-46.111 44.986-82.1 98.407-107.967 159.701S11.809 443.677 11.809 513.406s12.933 134.959 39.363 195.69S113.59 823.25 159.139 868.797c45.549 45.549 98.97 81.538 159.701 107.967s125.962 39.363 195.69 39.363 134.96-12.933 196.253-39.363 114.715-62.418 160.264-107.967c45.548-45.548 81.537-98.97 107.967-159.7s39.363-125.962 39.363-195.691-13.496-135.521-39.363-196.253z m-420.06 488.664c-11.808 11.808-26.429 17.994-43.861 17.994s-32.615-6.186-43.862-17.994c-11.809-11.81-17.994-26.43-17.994-43.3 0-17.994 6.185-32.615 17.994-43.861 11.81-11.81 26.43-17.995 43.862-17.995s32.615 6.186 43.861 17.995c11.81 11.809 17.995 26.43 17.995 43.861-0.562 16.87-6.186 30.928-17.995 43.3zM707.41 384.07c-1.687 24.18-9.56 45.549-24.18 64.106-14.62 18.557-30.928 35.426-48.923 50.047-17.994 14.62-33.177 28.116-47.797 40.488-14.059 12.37-20.807 23.617-20.244 34.302v24.18c0.562 12.371-3.374 23.055-12.934 32.615-8.997 9.56-21.368 14.62-37.114 15.183-15.745-0.563-28.116-5.624-37.676-14.62-9.56-8.998-14.058-18.558-14.058-28.68l-1.124-38.8c0.562-13.496 4.498-25.867 11.808-37.676s15.746-22.493 26.43-32.053c10.684-9.56 21.93-19.12 33.177-28.116 11.81-8.998 23.056-17.995 33.178-27.555 10.684-8.997 19.119-18.556 25.867-28.116 6.748-9.56 10.122-20.244 10.122-32.053 1.687-23.055-7.31-42.174-25.305-57.357s-42.737-23.056-73.103-23.056c-15.745 0-29.24 3.374-42.174 11.247s-23.056 16.87-32.053 27.554c-8.435 10.684-15.745 22.493-20.806 33.74-5.061 11.809-7.873 21.93-7.873 29.803 0 13.496-5.06 23.618-15.183 30.928s-21.368 10.684-33.177 10.122c-12.371-0.562-23.056-4.498-33.74-12.933-10.684-7.873-16.307-20.807-16.87-38.801-0.562-14.62 2.812-33.177 8.998-55.108 6.748-21.931 18.556-43.3 35.426-64.106s38.8-38.238 66.355-52.859c27.554-14.62 61.856-21.93 102.906-21.93 33.177 0 61.856 5.06 86.599 14.62 24.742 9.56 44.424 23.056 60.169 39.363 15.745 16.87 26.992 36.551 33.177 59.045 8.435 25.304 11.247 50.61 10.122 76.476z" p-id="2773" fill="#91959a"></path></svg>
        </div>
        <div style="clear:both"></div>
        <div class="chartBox">
          <tj-circle :circelData="circelData"></tj-circle>
        </div>
        <div class="space"></div>
        <div class="history-show-title">
          历史训练记录（共{{historyList.length}}次）
        </div>
        <div style="clear:both"></div>
        <table border="1" class="table">
          <tr>
            <td>时间</td>
            <td>得分</td>
            <td>时长</td>
          </tr>
          <tr v-for="(item, index) in historyList" :key="index" class="cursor" @click="details(item.lessonTrainingId)">
            <td>{{item.createdTime}}</td>
            <td>{{item.score}}</td>
            <td>{{returnDate(item.duration)}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import TjCircle from './../skillreport/component/Circle'
import { Practice } from './../practiceApi.js'
let echarts = require('echarts')
export default {
  name: 'skillHistory',
  components: {
    TjCircle
  },
  data () {
    return {
      lessonName: '',
      trainingRemark: '',
      trainingName: '',
      subjectNum: 0,
      finishedSize: 0,
      circelData: [
        {
          name: '时长',
          text: '15’30',
          percentage: 0
        },
        {
          name: '得分',
          text: '80',
          percentage: 0,
          status: 'success'
        },
        {
          name: '排名',
          text: '17',
          percentage: 0,
          status: 'warning'
        }
      ],
      // 图表数据
      option: {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value',
          // 设置Y轴最大值
          max: 120
        },
        series: [
          {
            name: '今日课程学习时长',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#009CF6',
                lineStyle: {
                  color: '#009CF6'
                }
              }
            },
            data: [],
            label: {
              show: true
            }
          }
        ]
      },
      historyList: []
    }
  },
  methods: {
    echartsFun () { // 折线图
      let myChart = echarts.init(document.getElementById('echartsDemo'))
      myChart.setOption(this.option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    async getHistory () { // 获得历史
      let res = await Practice.getHistory({
        lessonTrainingCatalogId: this.$route.query.lessonTrainingCatalogId,
        resourceTrainingId: this.$route.query.resourceTrainingId
      })
      if (res.code !== '200') {
        return this.$message.error(res.message)
      }
      let data = res.data
      this.lessonName = data.lessonName
      this.trainingName = data.trainingName
      this.trainingRemark = data.trainingRemark
      this.subjectNum = data.subjectNum
      this.option.xAxis.data = data.historyList.map(el => {
        return el.createdTime
      }).reverse()
      this.option.series[0].data = data.historyList.map(el => {
        return el.score
      }).reverse()
      this.circelData[0].text = this.returnDate(data.duration)
      this.circelData[0].percentage = data.duration / (60 * 15) * 100
      this.circelData[1].text = Number(data.score)
      this.circelData[1].percentage = Number(data.score) / 100 * 100
      this.circelData[2].text = Number(data.rank)
      this.circelData[2].percentage = Number(data.rank) / 100 * 100
      this.historyList = data.historyList
      this.echartsFun()
    },
    details (lessonTrainingId) { // 历史详情
      this.$router.push({ name: 'skillreport', query: { resourceTrainingId: this.$route.query.resourceTrainingId, lessonTrainingCatalogId: this.$route.query.lessonTrainingCatalogId, lessonTrainingId: lessonTrainingId } })
    },
    returnDate (time) {
      if (time < 60) {
        return time < 10 ? '00:0' + time : '00:' + time
      } else if (time < 3600) {
        return Math.floor(time / 60) < 10 ? '0' + Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60) : Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60)
      } else {
        return '大于一小时'
      }
    },
    instructions () {
      this.$alert('训练成绩按最高一次训练结果为准', '训练报告说明', {
        confirmButtonText: '确定'
      })
    }
  },
  mounted () {
    this.getHistory()
  }
}
</script>

<style lang="scss" scoped>
#skillHistory{
  .main-left{
    padding: 10px;line-height: 1.75;white-space: pre-wrap;text-align: justify;height: auto;background: #fff;
    .top-box {
      box-sizing: border-box;border-bottom: 1px solid #e5e5e5;
      .title {
        font-size: 16px;font-weight: bold;padding: 16px 12px;
      }
      .descript {
        font-size: 16px;color: #101d37;line-height: 1.75;text-align: justify;padding: 0 12px;
      }
      .topic-count {
        margin: 20px 12px;font-size: 14px;color: #91959a;
      }
    }
  }
  .middle-box {
    padding: 16px 12px;max-height:600px;overflow: auto;
    .people-count {
      color: #f86f33;padding: 0 5px;
    }
    .finishedList {
      margin: 16px 12px;padding-top: 20px;
      .list{
        padding-bottom: 20px;
      }
      .left {
        display:inline-block;
        .ranking{
          width: 20px;height: 40px;display:inline-block;line-height: 40px;text-align: center;vertical-align: top;margin-right: 5px;font-size: 20px;color: #909399;
        }
        .ranking:nth-child(1){
          font-weight: bold;color: #409EFF;
        }
        .ranking:nth-child(2){
          font-weight: bold;color: #67C23A;
        }
        .ranking:nth-child(3){
          font-weight: bold;color: #E6A23C;
        }
        .img {
          overflow: hidden;width: 40px;height: 40px;border-radius: 50%;display: inline-block;
          .i {
            width: 100%;
          }
        }
        dl{
          display:inline-block;
          dt{
            line-height: 1;font-size: 16px;color: #101d37;padding-left: 10px;margin-bottom: 12px;
          }
          dd{
            line-height: 1;font-size: 12px;padding-left: 10px;color: #909399
          }
        }
      }
      .right {
        float: right;display: flex;align-items: center;flex-wrap: wrap;width: 30px;
        height: 40px;
        span{
          line-height: 1;padding-top: 4px;text-align:center;display: block;width: 100%;
          color: #909399
        }
      }
    }
  }
  #echartsDemo {
    width: 100%;
    height: 300px;
  }
  // 右侧历史记录
  .main-right {
    box-sizing: border-box;padding: 10px;height: auto;background: #fff;
    .history-show-title {
      padding: 16px 12px;font-size: 16PX;color: #101d37;font-weight: bold;float: left;
    }
    .finish-time {
      margin: 16px 12px;font-size: 16px;color: #101d37;float: right
    }
    .space {
      margin: 40px 0 20px;border-bottom: 1px dashed #e5e5e5;
    }
    .table {
      margin: 20px;border-collapse: collapse;
    }
    .table td {
      height: 52px;width: 222px;text-align: center;line-height: 52px;border: 1px solid #ccc;
    }
  }
}
.bottom-box {
  padding: 20px 15px;
}
// echarts图表大小

</style>
